<template>
	<view class="container">
		<insert-btn :isShow="isShow" @insert="handleShowFrom"></insert-btn>
		
		<view class="content" v-show="!isShow">
			<view class="family-wrapper">
				<view 
					class="family-item"
					v-for="(item,index) in familyInfoArgs"
					:key="index"
				>
					<view class="header">
						工作经历 {{index + 1}}
					</view>
					<view class="staff-item">
						<view class="staff-item-title">
							<text class="dot">*</text>
							<text class="title-text ">
								公司名称
							</text>
						</view>
						<view class="staff-inp">
							<input 
								class="inp-box"  
								type="text"
								v-model="item.name"
							/>
						</view>
					</view>
					
					<view class="staff-item">
						<view class="staff-item-title">
							<text class="dot">*</text>
							<text class="title-text">开始日期</text>
						</view>
						<view class="staff-inp">
							<uni-icons
								type="wallet" 
								size="22"
								color="#676767"
								class="company-icons"
							>
							</uni-icons>
							
							<picker 
								mode="date" 
								:value="item.startDate" 
								@change="event => handleDateChange(event,index)"
								class="company-wrapper"
							>
								<view class="company-name">{{item.startDate}}</view>
							</picker>
							
						</view>
					</view>
					
					<view class="staff-item">
						<view class="staff-item-title">
							<text class="dot">*</text>
							<text class="title-text">结束日期</text>
						</view>
						<view class="staff-inp">
							<uni-icons
								type="wallet" 
								size="22"
								color="#676767"
								class="company-icons"
							>
							</uni-icons>
							
							<picker 
								mode="date" 
								:value="item.endDate" 
								@change="event => handleEndDateChange(event,index)"
								class="company-wrapper"
							>
								<view class="company-name">{{item.endDate}}</view>
							</picker>
							
						</view>
					</view>
					
					
					<view class="staff-item">
						<view class="staff-item-title">
							<text class="dot">*</text>
							<text class="title-text ">
								担任职务
							</text>
						</view>
						<view class="staff-inp">
							<input 
								class="inp-box"
								v-model="item.workUnit"
								type="text" 
							/>
						</view>
					</view>
					
					<view class="staff-item">
						<view class="staff-item-title">
							<text class="dot">*</text>
							<text class="title-text ">
								工作内容
							</text>
						</view>
						<view class="staff-inp1">
							<textarea class="inp-box" v-model="item.work" />
						</view>
					</view>
					
				</view>
			</view>
			
			<view class="add-wrapper">
				<view 
					class="add-inner" 
					hover-class="click-btn"
					@click="handleAdd"
				>
					<view class="insert-btn-inner">
						<uni-icons 
							type="plusempty" 
							size="22" 
							color="#8C8C8C"
						>
						</uni-icons>
						<text class="insert-btn-text">添加数据</text>
					</view>
				</view>
			</view>
			
			<view class="submit-btn-wrapper">
				<view class="submit-btn-inner">
					<view 
						class="submit-btn submit-btn-confirm"
						hover-class="click-btn-confirm"
						@click="handleconfirm"
					>
						确定
					</view>
					<view 
						class="submit-btn"
						hover-class="click-btn"
						@click="handleCancel"
					>
						取消
					</view>
				</view>
			</view>
		</view>
		
		<view class="btn-box-wrapper" v-show="isShow">
			<view class="btn-box" hover-class="click-btn" @click="handleSubmit">
				提交
			</view>
		</view>
		
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		name:"curriculum-vitae",
		data() {
			return {
			  isShow: false,
			  familyInfoArgs: [
			  	{
			  		name: '',
			  		workUnit: '',
					work: '',
					startDate: '',
					endDate: ''
			  	}
			  ],
			};
		},
		props: {
			vitaeData: {
				type: Array,
				default () {
					return []
				}
			}
		},
		watch: {
			vitaeData (newVal) {
			
				if (newVal.length) {
					let d = []
					for (let obj of newVal) {
						d.push({
							id: obj.id,
							name: obj.c_name,
							workUnit: obj.serve_job,
							work: obj.detail,
							startDate:obj.start_time,
							endDate: obj.end_time
						})
					}	
					this.familyInfoArgs = d
				}
			}
		},
		computed: {
			...mapGetters(
				[
				 "userInfo",
				]
			)
		},
		methods: {
			handleShowFrom (val) {
				this.isShow = val
			},
			handleAdd () {
				let obj = {
			  		name: '',
			  		workUnit: '',
					work: '',
					startDate: '',
					endDate: ''
			  	}
				let d = JSON.parse(JSON.stringify(this.familyInfoArgs))
				d.push(obj)
				this.familyInfoArgs = d
			},
			handleconfirm () {
				this.isShow = true
			},
			handleCancel () {
				// this.familyInfoArgs = [{
			 //  		name: '',
			 //  		workUnit: '',
				// 	work: '',
				// 	startDate: '',
				// 	endDate: ''
			 //  	}]
				this.isShow = true
			},
			handleDateChange (e,index) {
				let d = JSON.parse(JSON.stringify(this.familyInfoArgs))
				d[index].startDate =  e.detail.value
				this.familyInfoArgs = d
			},
			handleEndDateChange (e,index) {
				let d = JSON.parse(JSON.stringify(this.familyInfoArgs))
				d[index].endDate =  e.detail.value
				this.familyInfoArgs = d
			},
			async handleSubmit () {
				if (!this.$route.query.staff_id) {
					if (!this.userInfo.staff_id) return this.$utils.showToast('请先添加入职信息')
				}
				if (!this.handleVerified()) return 
				let d = JSON.parse(JSON.stringify(this.familyInfoArgs))
				let staff_id = ''
				if (this.$route.query.staff_id) {
					staff_id = this.$route.query.staff_id
				} else if (this.userInfo.staff_id){
					staff_id = this.userInfo.staff_id
				}
				for (let o of d) {
					let params = {
						staff_id: staff_id,
						c_name: o.name,
						start_time: o.startDate,
						end_time: o.endDate,
						serve_job: o.workUnit,
						detail: o.work
					}
					if (o.id) {
						params.id = o.id
					}
					await this.handleAddVitae(params)
				}
			},
			async handleAddVitae (params) {
				try {
					await this.$api.handleAddVitae(params)
					this.$utils.showToast('添加成功')	
				} catch (e) {
					console.log('comeponent vitae(handleAddVitae) error ->',e)
				}
			},
			handleVerified () {
				let d = JSON.parse(JSON.stringify(this.familyInfoArgs))
				let isVerified = true
				for (let o of d) { 
					if (!o.name) {
						this.$utils.showToast('公司名称不能为空')	
						isVerified = false 
						break
					}
					if (!o.startDate) {
						this.$utils.showToast('开始日期不能为空')	
						isVerified = false 
						break
					}
					if (!o.endDate) {
						this.$utils.showToast('结束日期不能为空')	
						isVerified = false 
						break
					}
					if (!o.workUnit) {
						this.$utils.showToast('担任职务不能为空')	
						isVerified = false 
						break
					}
					if (!o.work) {
						this.$utils.showToast('工作内容不能为空')	
						isVerified = false 
						break
					}
				}
				return isVerified
			} 
		}
	}
</script>

<style lang="scss">
.container {
	width: 100%;
	padding-bottom: 50rpx;
	box-sizing: border-box;
	.btn-box-wrapper {
		width: 100%;
		position: fixed;
		bottom: 200rpx;
		left: 0;
		.btn-box {
			line-height: 80rpx;
			width: 200rpx;
			background: #005AFF;
			border-radius: 3rpx;
			text-align: center;
			font-size: 30rpx;
			color: #FFFFFF;
			position: absolute;
			left: 50%;
			margin-left: -75rpx;
		}
		.click-btn {
			background: #2c6adb;
		}
	}
	.family-wrapper {
		.family-item {
			margin-bottom: 40rpx;
			.header {
				line-height: 50rpx;
				background: #D9D9D9;
				padding: 0 50rpx;
				font-size: 30rpx;
				color: #979797;
			}
			.staff-item {
				padding: 0 50rpx;
				box-sizing: border-box;
				.hide {
					opacity: 0;
					visibility:hidden;
				}
				.staff-item-title{
					font-size: 30rpx;
					padding: 26rpx 0;
					.dot {
						color:#FF0000
					}
					.title-text {
						color: #676767;
					}
				}
				.upload-bg {
					background: #ECECEC;
					border: none !important;
					font-size: 30rpx;
					color: #646464 !important;
					justify-content: center;
					
				}
				.staff-inp {
					width: 100%;
					height: 70rpx;
					border-radius: 3rpx;
					border: 1rpx solid #D3D3D3;
					display: flex;
					align-items: center;
					box-sizing: border-box;
					.bottom-icons {
						position: absolute;
						right: 20rpx;
						z-index: -1;
					}
					.company-icons {
						margin: 0 20rpx;
					}
					.company-wrapper {
						width: 100%;
						.company-name {
							width: 100%;
							height: 50rpx;
							display: flex;
							align-items: center;
							font-size: 30rpx;
							color: #676767;
						}
						.company-name-tip {
							@extend .company-name;
							color: #979797;
							
						}
					}
					.inp-box {
						width: 100%;
						height: 70rpx;
						font-size: 30rpx;
						color: #676767;
						padding: 0 20rpx;
						box-sizing: border-box;
					}
					.place-holder-s {
						line-height: 70rpx;
						color: #979797;	
					}
					.disabled {
						background: #ECECEC;
					}
					.card-btn {
						width: 250rpx;
						line-height: 70rpx;
						background: #2D83FE;
						font-size: 30rpx;
						color: #FFFFFF;
						text-align: center;
					}
					.btn-click {
						background: #739cd7;
					}
					
				}
				.staff-inp1 {
					width: 100%;
					height: 220rpx;
					border-radius: 3rpx;
					border: 1rpx solid #D3D3D3;
					display: flex;
					align-items: center;
					box-sizing: border-box;
					.inp-box {
						width: 100%;
						height: 220rpx;
						font-size: 30rpx;
						color: #676767;
						padding: 20rpx;
						box-sizing: border-box;
					}
				}
			}
		}
	}
	
	.add-wrapper {
		padding: 50rpx 50rpx;
		.add-inner {
			background: #EDEDED;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.insert-btn-inner {
				display: flex;
				align-items: center;
				.insert-btn-text {
					font-size: 30rpx;
					color: #8C8C8C;
				}
			}
		}
		.click-btn {
			background: #d5cdcd;
		}
	}
	.submit-btn-wrapper {
		.submit-btn-inner {
			display: flex;
			align-items: center;
			justify-content: center;
			.submit-btn {
				line-height: 80rpx;
				width: 200rpx;
				background: #C2C2C2;
				border-radius: 3rpx;
				text-align: center;
				font-size: 30rpx;
				color: #FFFFFF;
			}
			.submit-btn-confirm {
				background: #005AFF;
				margin-right: 50rpx;
			}
			.click-btn-confirm {
				background: #2c6adb;
			}
			.click-btn {
				background: #a39e9e;
			}
		}
	}
}
</style>